﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>صناديق CSS للمدونة - CSS boxes with the Jquery for Blog</title>
<script src='https://jetara.googlecode.com/svn/trunk/jquery-1.9.1.js' type='text/javascript'/>

    <script src='https://jetara.googlecode.com/svn/trunk/jquery.min.js' type='text/javascript'/>
    <script>
    $(document).ready(function(){
        $(".canhide").click(function(){
            $(this).fadeOut(500);
            });
        $("#canhide-success").click(function(){
            $("#success-x").fadeOut(500);
            });
        $("#canhide-warning").click(function(){
            $("#warning-x").fadeOut(500);
            });
        $("#canhide-error").click(function(){
            $("#error-x").fadeOut(500);
            });
        $("#canhide-information").click(function(){
            $("#information-x").fadeOut(500);
            });
});
    </script>
</head>

<body>
<style>
/* messag_box by 7loll.blogspot.com */
.body {
float: right;
padding: 0px 400px;
font: .8em tahoma;
}
.success {
    width: 400px;
    padding:10px;
    cursor: pointer;
    background-color: #EFFFB9;
    border: 1px solid #99C600;
    color: #3C5A01;
}
.success p {
    font-size: 12px;
    font-family: Tahoma;
    text-align:right;
    padding: 0 20px;
    background: url('https://jetara.googlecode.com/svn/trunk/messag_box/success.png') no-repeat right center;
}
.warning {
    width: 400px;
    padding:10px;
    cursor: pointer;
    border: 1px solid #FFC237;
    background-color: #FFEAA8;
    color: #826200;
}
.warning p {
    font-size: 12px;
    font-family: Tahoma;
    text-align:right;
    padding: 0 20px;
    background: url('https://jetara.googlecode.com/svn/trunk/messag_box/warning.png') no-repeat right center;
}
.error {
    width: 400px;
    padding:10px;
    cursor: pointer;
    border: 1px solid #EB5339;
    background-color: #FCCAC2;
    color: #826200;
}
.error p {
    font-size: 12px;
    font-family: Tahoma;
    text-align:right;
    padding: 0 20px;
    background: url('https://jetara.googlecode.com/svn/trunk/messag_box/error.png') no-repeat right center;
}
.information {
    width: 400px;
    padding:10px;
    cursor: pointer;
    border: 1px solid #418ACC;
    background-color: #D0E4F4;
    color: #826200;
}
.information p {
    font-size: 12px;
    font-family: Tahoma;
    text-align:right;
    padding: 0 20px;
    background: url('https://jetara.googlecode.com/svn/trunk/messag_box/info.gif') no-repeat right center;
}
#success-x {
    width: 400px;
    padding:10px;
    cursor: default;
    background-color: #EFFFB9;
    border: 1px solid #99C600;
    color: #3C5A01;
}
#success-x p {
    font-size: 12px;
    font-family: Tahoma;
    text-align:right;
    padding: 0 20px;
    background: url('https://jetara.googlecode.com/svn/trunk/messag_box/success.png') no-repeat right center;
}
#success-x span{
    margin: -10px 0 0 -5px;
    float: left;
    text-align: right;
    font-size: 12px;
    clear: both;
    cursor: pointer;
    color: #3C5A01;
}
#warning-x {
    width: 400px;
    padding:10px;
    cursor: default;
    border: 1px solid #FFC237;
    background-color: #FFEAA8;
    color: #826200;
}
#warning-x p {
    font-size: 12px;
    font-family: Tahoma;
    text-align:right;
    padding: 0 20px;
    background: url('https://jetara.googlecode.com/svn/trunk/messag_box/warning.png') no-repeat right center;
}
#warning-x span{
    margin: -10px 0 0 -5px;
    float: left;
    text-align: right;
    font-size: 12px;
    clear: both;
    cursor: pointer;
    color: #3C5A01;
}
#error-x {
    width: 400px;
    padding:10px;
    cursor: default;
    border: 1px solid #EB5339;
    background-color: #FCCAC2;
    color: #826200;
}
#error-x p {
    font-size: 12px;
    font-family: Tahoma;
    text-align:right;
    padding: 0 20px;
    background: url('https://jetara.googlecode.com/svn/trunk/messag_box/error.png') no-repeat right center;
}
#error-x span{
    margin: -10px 0 0 -5px;
    float: left;
    text-align: right;
    font-size: 12px;
    clear: both;
    cursor: pointer;
    color: #3C5A01;
}
#information-x {
    width: 400px;
    padding:10px;
    cursor: default;
    border: 1px solid #418ACC;
    background-color: #D0E4F4;
    color: #826200;
}
#information-x p {
    font-size: 12px;
    font-family: Tahoma;
    text-align:right;
    padding: 0 20px;
    background: url('https://jetara.googlecode.com/svn/trunk/messag_box/info.gif') no-repeat right center;
}
#information-x span{
    margin: -10px 0 0 -5px;
    float: left;
    text-align: right;
    font-size: 12px;
    clear: both;
    cursor: pointer;
    color: #3C5A01;
}
</style>
<center>
<div class="body">
<p>&nbsp;</p>
<p>.-. هذه الإخطارات تتلاشى عند النقر</p>
<p>&nbsp;</p>


    <!-- success -->
<div class="success canhide">
<p><b>تنبية :</b> مدونة حلول بلوجر هي الافضل</p>
</div>
    <!-- end success -->
    
    <p>&nbsp;</p>
    
    <!-- warning -->
<div class="warning canhide">
<p><b>تحذير :</b> نسخ المواضيع من المدونات والمواقع "مضر"</p>
</div>
    <!-- end warning -->
    
    <p>&nbsp;</p>
    
    <!-- error -->
<div class="error canhide">
<p><b>خطأ :</b> الخطأء ان تستمر في تجاهل غيرك وعدم احترامهم, </p>
</div>
    <!-- end error -->
    
    <p>&nbsp;</p>
    
    <!-- information -->
<div class="information canhide">
<p><b>تم الإرسال :</b> أستغفر الله العلي العظيم واتوب إليه من كل ذنب عظيم</p>
</div>
    <!-- end information -->
    
<p>&nbsp;</p>


    <!-- success-x -->
<div id="success-x">
<span id="canhide-success">x</span>
<p><b>تنبية :</b> استغفر الله , استغفر الله , استغفر الله</p>
</div>
    <!-- end success-x -->
    
    <p>&nbsp;</p>
    
    <!-- warning-x -->
<div id="warning-x">
<span id="canhide-warning">x</span>
<p><b>تحذير :</b> عرض رسالة التحذير</p>
</div>
    <!-- end warning-x -->
    
    <p>&nbsp;</p>
    
    <!-- error-x -->
<div id="error-x">
<span id="canhide-error">x</span>
<p><b>خطأ :</b> عرض رسالة الخطأ</p>
</div>
    <!-- end error-x -->
    
    <p>&nbsp;</p>
    
    <!-- information-x -->
<div id="information-x">
<span id="canhide-information">x</span>
<p><b>تم الإرسال :</b> عرض رسالة تم الإرسال</p>
</div>
    <!-- end information-x -->

<p>&nbsp;</p>
<p>.-. هذه الإخطارات لا تتلاشى عند النقر</p>
<p>&nbsp;</p>

    <!-- success -->
<div class="success">
<p><b>تنبية :</b> عرض رسالة التنبية</p>
</div>
    <!-- end success -->
    
    <p>&nbsp;</p>
    
    <!-- warning -->
<div class="warning">
<p><b>تحذير :</b> عرض رسالة التحذير</p>
</div>
    <!-- end warning -->
    
    <p>&nbsp;</p>
    
    <!-- error -->
<div class="error">
<p><b>خطأ :</b> عرض رسالة الخطأ</p>
</div>
    <!-- end error -->
    
    <p>&nbsp;</p>
    
    <!-- information -->
<div class="information">
<p><b>تم الإرسال :</b> عرض رسالة تم الإرسال</p>
</div>
    <!-- end information -->
<p>&nbsp;</p>
<p>ملاحظة:</p>
<p>يمكنك تغيير عرض مساحة الإخطار عن طريق css من خلال width</p>
<p>وايضاً يمكنك تعريض الإخطار عن طريق css من خلال padding</p>
<p>&nbsp;</p>
</div>
</center>





</body>

</html>
